<template>
	<view class="live">
		<view class="live-item" v-for="(item,index) in videoList" :key="index">
			<image class="live-item-video" :src="item.image" mode=""></image>
		<!-- 	<video class="live-item-video" id="myVideo" 
				:poster="item.image"
				src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/wap2appvsnative.mp4"
				autoplay="true"
				@error="videoErrorCallback" 
				:danmu-list="danmuList"
				enable-danmu danmu-btn controls
			>
			 </video> -->
			<view class="live-item-icon">
				<text>直播中</text>
			</view>
			<view class="live-item-title">
				{{item.title}}
			</view>
			<view class="live-item-name">
				<view class="live-item-name-left">
					<view class="live-avatar-bk">
						<u-avatar size="25" :src="item.avatar"></u-avatar>
					</view>
					<view class="name">{{item.name}}</view>
				</view>
				<view class="live-item-name-right">
					<u-icon name="eye" color="#6B6C6E" size="18"></u-icon>
					{{item.watch_num}}万
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"live",
		props:{
			videoList:{ //	当前选中的index
				type:Array,
				default:()=>[]
			}
		},
		data() {
			return {
				danmuList: [{
						text: '第 1s 出现的弹幕',
						color: '#ff0000',
						time: 1
					},
					{
						text: '第 3s 出现的弹幕',
						color: '#ff00ff',
						time: 3
					}
				]
			};
		}
	}
</script>

<style lang="scss">
	.live{
		padding: 10rpx 20rpx 20rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;
		border-top: 1rpx solid #F4F4F4;
		&-item{
			width: 49%;
			margin-top: 20rpx;
			position: relative;
			background-color: #F6F6F6;
			border-radius: 20rpx;
			padding-bottom: 10rpx;
			&-title{
				padding: 2%;
				letter-spacing: 2rpx;
				font-size: 24rpx;
			}
			&-name{
				padding: 2%;
				display: flex;
				justify-content: space-between;
				color: #464646;
				font-size: 22rpx;
				&-left,&-right{
					display: flex;
					align-items: center;
				}
				&-left{
					flex: 1;
					position: relative;
					height: 60rpx;
				}
				.name{
					left: 85rpx;
					position: absolute;
				}
				.image{
					width: 60rpx;
					position: absolute;
					z-index: 2;
					left: 10rpx;
				}
				.live-avatar-bk{
					position: absolute;
					left: 18rpx;
					z-index: 1;
				}
			}
			&-icon{
				position: absolute;
				top: 10rpx;
				right: 5rpx;
				padding: 5rpx 10rpx;
				// color: #FFFFFF;
				// font-size: 18rpx;
				// border-radius: 10rpx;
				z-index: 99;
				// background-color: #6B6C6E;
				color: #FFFFFF;
				font-size: 20rpx;
				display: flex;
				align-items: center;
				background-color: rgb(0, 0, 0,.5);
				border-radius: 10rpx;
				width: 90rpx;
				justify-content: space-between;
				.image{
					width: 20rpx;
				}
			}
		}
		&-item:nth-child(2n){
			margin-left: 2%;
		}
	}
	.live-item-video{
		// border-radius: 20rpx;
		border-start-start-radius: 20rpx;
		border-start-end-radius: 20rpx;
		width: 100%;
		height: 500rpx;
	}
	video{
		border-radius: 20rpx;
		width: 100%;
		height: 500rpx;
	}

</style>